<template>
  <view class="payAnother" v-if="orderInfo && shenheStatus == 0">
    <view class="header">
      <image
        class="pic"
        :src="orderInfo.user_info.avatar"
        v-if="orderInfo.user_info"
      ></image>
      <text class="name" v-if="orderInfo.user_info">{{
        orderInfo.user_info.name
      }}</text>
      <text class="tip" v-if="!userId">{{ $t("order.orderShare1") }}</text>
      <text class="tip" v-else>{{ $t("order.orderShare2") }}</text>
    </view>
    <view class="countDown">
      <text>{{ $t("order.needPay") }}</text>
      <view class="price">
        <text>￥</text>
        <text>{{ orderInfo.pay_price }}</text>
      </view>
      <view class="time">
        <text>{{ $t("order.orderTime") }}</text>
        <view class="count">
          <text>{{ time.minute }}</text>
          <text>:</text>
          <text>{{ time.second }}</text>
        </view>
      </view>
      <view class="buyBtn" v-if="!userId">
        {{ $t("order.toWxFri") }}
        <button open-type="share" @click="share"></button>
      </view>
      <view class="buyBtn" v-else @click="pay">{{ $t("order.payToFri") }}</view>
    </view>
    <view class="goods">
      <goodsDetail :orderitem="orderInfo"></goodsDetail>
    </view>
    <view class="instructions">
      <text class="title">{{ $t("order.instructions") }}</text>
      <template v-if="!userId">
        <text>1.{{ $t("order.instru1") }}</text>
        <text>2.{{ $t("order.instru2") }}</text>
      </template>
      <template v-else>
        <text>1.{{ $t("order.instru3") }}</text>
        <text>2.{{ $t("order.instru4") }}</text>
        <text>3.{{ $t("order.instru2") }}</text>
      </template>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import goodsDetail from "../components/pay-another/goods-detail.vue";
export default {
  components: {
    Shenhe,
    goodsDetail
  },
  data() {
    return {
      // 订单id
      orderId: "",
      // 分享过来的用户id
      userId: "",
      // 订单详情
      orderInfo: {},
      // 倒计时剩余时间
      countDown: 0,
      // 倒计时时间
      time: {
        minute: "00",
        second: "00"
      },
      md_id: 0
    };
  },
  methods: {
    // 获取订单详情
    async getOrder() {
      let params = {
        order_id: this.orderId,
        userId: this.userId
      };
      if (this.md_id == -1) {
        params["md_id"] = -1;
      }
      const res = await this.$allrequest.order.detail(params, true);
      if (res.code == 0) {
        this.orderInfo = res.data;
        if (this.orderInfo.trade_status > -1) {
          uni.showToast({
            title: this.$t("order.cantPay"),
            icon: "none"
          });
          setTimeout(() => {
            uni.switchTab({
              url: "/pages/home/home"
            });
          }, 1000);
        } else {
          if (res.data.addtime && res.data.addtime != "") {
            var newDate = new Date(res.data.addtime.replace(/-/g, "/"));
            let addTime = new Date(newDate).getTime();
            this.calculateTimes(addTime);
          }
        }
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none"
        });
        setTimeout(() => {
          this.$utils.goBack();
        }, 2000);
      }
    },
    // 点击支付
    pay() {
      let add =
        new Date(this.orderInfo.addtime.replace(/-/g, "/")).getTime() / 1000;
      let index = this.orderInfo.pay_type_list.findIndex((item) => {
        return item.payment == 2;
      });
      if (index > -1) {
        this.orderInfo.pay_type_list.splice(index, 1);
      }
      let params = {
        payData: {
          order_id: this.orderId,
          order_id_list: this.orderInfo.order_id_list || "",
          pay_type: this.orderInfo.pay_type_list[0].payment
        },
        backUrl: "/pages/home/home",
        pay_type_list: this.orderInfo.pay_type_list,
        pay_price: this.orderInfo.pay_price,
        createDate: add
      };
      this.$utils.toUrl(
        `/other/pay/pay?data=${JSON.stringify(params)}`,
        "redirectTo"
      );
    },
    // 计算支付时间倒计时
    calculateTimes(date) {
      let time = date - 0 + 15 * 60 * 1000; //结束时间戳
      let currentTime = new Date().getTime(); // 当前时间戳
      currentTime = time - currentTime <= 0 ? 0 : time - currentTime;
      this.countDown = currentTime;
      clearInterval(this.timer);
      this.startCountDown();
    },
    // 开始倒计时
    startCountDown() {
      if (this.countDown <= 0) {
        return uni.showToast({
          title: this.$t("pay.noPay"),
          icon: "none",
          duration: 1000,
          complete() {
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/home/home"
              });
            }, 1000);
          }
        });
      }
      this.timer = setInterval(() => {
        let time = this.countDown / 1000; //秒
        this.countDown = this.countDown - 1000;
        let hour = Math.floor(time / (60 * 60));
        let minute = Math.floor(time / 60) - hour * 60;
        let second = Math.floor(time) - hour * 60 * 60 - minute * 60;
        second = second < 0 ? 0 : second;
        this.time.minute = minute < 10 ? "0" + minute : minute;
        this.time.second = second < 10 ? "0" + second : second;
        if (minute <= 0 && second <= 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },

    share() {
      // #ifdef APP-PLUS
      let userId = 0;
      if (uni.getStorageSync("userInfo")) {
        userId = uni.getStorageSync("userInfo").id;
      }

      let href =
        "/order/pay-another/pay-another?orderId=" +
        this.orderId +
        "&userId=" +
        userId;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 2,
        href,
        imageUrl: this.orderInfo.goods_list[0].goods_pic
      });
      // #endif
    }
  },
  onLoad(t) {
    this.orderId = t.orderId;
    if (t.userId) {
      let routes = getCurrentPages();
      let curRoute = routes[routes.length - 1].$page.fullPath;
      this.$store.commit("setNoLoginTabarPath", curRoute);
      this.$store.commit("setRouteType", "navigateTo");
      this.userId = t.userId;
    }
    if (t?.md_id) {
      this.md_id = t.md_id;
    }
  },
  onShow() {
    if (this.userId == uni.getStorageSync("userInfo").id) {
      this.userId = "";
    }
    this.getOrder();
  },
  onShareAppMessage(res) {
    let userId = 0;
    if (uni.getStorageSync("userInfo")) {
      userId = uni.getStorageSync("userInfo").id;
    }
    if (res.from == "button") {
      let path =
        "/order/pay-another/pay-another?orderId=" +
        this.orderId +
        "&userId=" +
        userId;
      if (this.md_id == -1) {
        path = path + "&md_id=-1";
      }
      return {
        title: this.stores.name,
        path: path
      };
    }
  },
  onUnload() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped>
.payAnother {
  min-height: 100vh;
  background-color: #f2f2f2;
  color: #262626;
  padding-bottom: 10rpx;
  font-family: PingFang SC;
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    .pic {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      background-color: #fff;
    }
    .name {
      font-size: 30rpx;
      font-weight: 600;
      margin-top: 20rpx;
    }
    .tip {
      font-size: 30rpx;
      margin-top: 4rpx;
    }
  }
  .countDown {
    padding: 40rpx 0 20rpx 0;
    width: 702rpx;
    margin: 20rpx auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28rpx;
    .price {
      display: flex;
      align-items: baseline;
      font-weight: 600;
      font-size: 44rpx;
      text:nth-child(2) {
        font-size: 68rpx;
      }
    }
    .time {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      margin-top: 20rpx;
      .count {
        display: flex;
        align-items: center;
        margin-left: 16rpx;
        text:nth-child(2n + 1) {
          width: 44rpx;
          height: 40rpx;
          border-radius: 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 600;
          color: #fff;
          background-color: #f0250e;
        }
        text:nth-child(2) {
          color: #f0250e;
          margin: 0 6rpx;
        }
      }
    }
    .buyBtn {
      position: relative;
      width: 654rpx;
      height: 88rpx;
      border-radius: 99px;
      background-color: #f0250e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 600;
      color: #fff;
      margin-top: 40rpx;
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0;
      }
    }
  }
  .goods {
    width: 702rpx;
    margin: 0 auto;
    border-radius: 16rpx;
    overflow: hidden;
  }
  .instructions {
    display: flex;
    flex-direction: column;
    width: 702rpx;
    margin: 24rpx auto;
    text {
      font-size: 24rpx;
      color: #8c8c8c;
      margin-bottom: 10rpx;
    }
    .title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      color: #262626;
    }
  }
}
</style>
